<template>
    <div>
        <!-- 余额不足弹窗 -->
        <a-modal v-model:visible="modalVisible" title="余额提醒" @ok="handleCreate">
            <template #footer>
                <a-button key="recharge" @click="handleRecharge">去充值</a-button>
                <a-button key="create" type="primary" @click="handleCreate">继续创建</a-button>
            </template>
            <div>
                <div class="fz-16 mb-16 col-223354">需支付金额: <span class="col-money">￥{{ (parseFloat(checkData?.instanceAmount)  + parseFloat(checkData?.storageAmount)).toFixed(2) || 0 }}</span></div>
                <div class="fz-16 mb-16 col-223354">账户可用余额： ￥{{ checkData?.balance || 0 }}</div>
                <span class="fz-14 mb-16 col-223354">您有 <span class="col-07f">{{checkData?.nextPrePaidCount}}</span>个开启了自动续费的预付费实例，<span class="col-07f">{{checkData?.nextPaygCount}}</span>个按量付费实例，若继续创建可能会影响下一个付费周期，导致实例被关闭</span>
                <div class="fz-16 mb-16 col-223354">按量付费实例费用: <span class="col-money">￥{{ checkData?.nextPaygAmount || 0 }}</span></div>
                <div class="fz-16 mb-16 col-223354">自动付费下周期所需费用： <span class="col-money">￥{{ checkData?.nextPrePaidAmount || 0 }}</span></div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    checkData: {
        type: Object,
        default: {}
    }
});

const emit = defineEmits(['update:modelValue','handleCreate']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 去充值
const handleRecharge = () => {
    emit('update:modelValue', false)
    router.push('/recharge')
}

// 继续创建
const handleCreate = () => {
    emit('update:modelValue', false)
    emit('handleCreate')
}

</script>

<style scoped lang="less">
.instance-modal {
    font-size: 14px;
    color: #646F87;

    &>div {
        margin-bottom: 8px;
    }
}
</style>

